<template>
  <div class="version-log-management-page">
    <el-card class="version-log-management-page__header">
      <div class="version-log-management-page__header-inputs">
        <el-date-picker
          v-model="queryCriteria.date"
          :end-placeholder="$t('versionLogManagement.version02')"
          :start-placeholder="$t('versionLogManagement.version01')"
          format="yyyy-MM-dd"
          type="daterange"
          value-format="yyyy-MM-dd"
        />
        <el-select v-model="queryCriteria.updateResult" :clearable="true">
          <el-option
            v-for="option in updateResultOptions"
            :key="option.value"
            :value="option.value"
            :label="option.label"
          />
        </el-select>
      </div>
      <div class="version-log-management-page__header-buttons">
        <el-button type="primary" icon="el-icon-search" @click="toSearch">
          {{ $t('versionLogManagement.version00') }}
        </el-button>
      </div>
    </el-card>
    <el-card class="version-log-management-page__body">
      <div class="version-log-management-page__body-table-box">
        <el-table :data="tableData">
          <el-table-column
            prop="originalVersion"
            :label="$t('versionLogManagement.version04')"
            align="center"
          />
          <el-table-column
            prop="updateVersion"
            :label="$t('versionLogManagement.version05')"
            align="center"
          />
          <el-table-column
            prop="updateTime"
            :label="$t('versionLogManagement.version06')"
            align="center"
          />
          <el-table-column
            prop="macAddress"
            :label="$t('versionLogManagement.version07')"
            align="center"
          />
          <el-table-column
            prop="ipAddress"
            :label="$t('versionLogManagement.version08')"
            align="center"
          />
          <el-table-column
            prop="updateResult"
            :label="$t('versionLogManagement.version09')"
            align="center"
          >
            <template #default="scope">
              {{ getResultLabel(scope.row.updateResult) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        :current-page="pageable.page"
        :page-size="pageable.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="pageable.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="onPageSizeChange"
        @current-change="onPageChange"
      />
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'VersionLogManagement',
  data() {
    return {
      queryCriteria: {
        date: [],
        updateResult: '',
      },
      updateResultOptions: [
        {
          value: '0',
          label: this.$t('versionLogManagement.version11'),
        },
        {
          value: '1',
          label: this.$t('versionLogManagement.version12'),
        },
        {
          value: '2',
          label: this.$t('versionLogManagement.version13'),
        },
      ],
      tableData: [],
      pageable: {
        total: 0,
        page: 1,
        pageSize: 10,
      },
    };
  },
  mounted() {
    this.fetchVersionLogList();
  },
  methods: {
    toSearch() {
      this.pageable.page = 1;
      this.fetchVersionLogList();
    },
    fetchVersionLogList() {
      let startTime = '';
      let endTime = '';
      if (this.queryCriteria.date && this.queryCriteria.date.length > 0) {
        startTime = this.queryCriteria.date[0];
        endTime = this.queryCriteria.date[1];
      }
      const { page, pageSize: limit } = this.pageable;
      const paramStr = `update_result=${this.queryCriteria.updateResult}&start_time=${startTime}&end_time=${endTime}&page=${page}&limit=${limit}`;
      this.$http
        .get(`clientversionlog/getVersionLogList?${paramStr}`)
        .then(({ data: res }) => {
          if (res.code === 0 && res.data) {
            const { list, total } = res.data;
            this.pageable.total = total;
            this.tableData = list;
            if (this.tableData.length <= 0 && this.pageable.page > 1) {
              this.pageable.page -= 1;
              this.fetchVersionLogList();
            }
          } else {
            console.log(res);
          }
        })
        .catch((e) => {
          console.error(e);
        });
    },
    onPageChange(page) {
      this.pageable.page = page;
      this.fetchVersionLogList();
    },
    onPageSizeChange(pageSize) {
      this.pageable.pageSize = pageSize;
      this.fetchVersionLogList();
    },
    getResultLabel(value) {
      const index = this.updateResultOptions.findIndex((e) => e.value === value);
      if (index !== -1) {
        return this.updateResultOptions[index].label;
      }
      return this.$t('versionLogManagement.version10');
    },
  },
};
</script>
<style lang="scss" scoped>
.version-log-management-page {
  width: 100%;
  height: 100%;

  &__header {
    width: 100%;
    height: 80px;

    ::v-deep .el-card__body {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &-inputs {
      display: flex;
      align-items: center;
      gap: 20px;

      ::v-deep .el-input {
        width: 300px;
      }
      ::v-deep .el-date-editor {
        width: 340px;
      }
    }
  }

  &__body {
    margin-top: 20px;
    height: calc(100% - 100px);
    width: 100%;

    ::v-deep .el-pagination {
      margin-top: 8px;
    }
  }
}
</style>
